<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="js/lrc.js"></script>
</head>

<body>
    <div class="cover">
        <ul>
        </ul>
    </div>
    <audio src="static/周杰伦-七里香.mp3" controls></audio>
</body>
<script>
    let lrcarr = [] //歌词数组
    let timearr = [] // 时间数组

    let reg = /\[(\d{2}:\d{2})\.\d{2}\](.+)/g

    let temp = reg.exec(str)
    while (temp) {
        timearr.push(temp[1])
        lrcarr.push(temp[2])
        temp = reg.exec(str)
    }

    // console.log(timearr)
    // console.log(lrcarr)

    lrcarr.forEach((item, index) => {
        let li = `<li class="${index==0?'active':''}">${item}</li>`
        $("ul").append(li)
    })

    const audio = document.querySelector("audio")
    let oldstr = ""
    $("audio").on("timeupdate", () => {
        let {
            currentTime
        } = audio
        // 格式化时间
        let minutes = parseInt(currentTime / 60)
        let seconds = parseInt(currentTime % 60)
        let timestr = (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds)

        let index = timearr.findIndex(item => {
            return item == timestr
        })


        let num = `${-30*index + 150}px`
        if (index != -1) {
            $("ul").css("top", num)
            $("li").eq(index).addClass("active").siblings().removeClass("active")
        }


    })
</script>

</html>